<template>
  <div class="keep">
    <button
      @click="handleClick1"
      :class="{ activeStyle: active === 'showModal' }"
    >
      点击切换showmodel组件
    </button>
    <button @click="handleClick2" :class="{ activeStyle: active === 'tab' }">
      点击切换tab组件
    </button>
    <keep-alive>
      <div class="tab" :is="active"></div>
    </keep-alive>
  </div>
</template>
<script>
import tab from "@/components/tabs";

import showModal from "@/components/showModal";

export default {
  data() {
    return {
      active: "showModal",
    };
  },
  components: {
    tab,
    showModal,
  },
  methods: {
    handleClick1() {
      this.active = "showModal";
    },
    handleClick2() {
      this.active = "tab";
    },
  },
};
</script>

<style scoped>
.activeStyle {
  background: green;
  color: #ccc;
}
.tab {
  min-height: 50px;
  background: #ccc;
  color: green;
}
</style>
